package com.example.composestudy.ui.animated

import androidx.compose.animation.animateColor
import androidx.compose.animation.core.RepeatMode
import androidx.compose.animation.core.animateFloat
import androidx.compose.animation.core.infiniteRepeatable
import androidx.compose.animation.core.rememberInfiniteTransition
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material3.LocalTextStyle
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.TransformOrigin
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.text.style.TextMotion
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.composestudy.ui.theme.ColorCyan
import com.example.composestudy.ui.widget.MyTopAppBar

@Composable
fun AnimatedTextPage(onBack: () -> Unit) {
    Scaffold(topBar = { MyTopAppBar(title = "文本的缩放、平移或旋转动画效果") { onBack.invoke() } }) { innerPadding ->
        LazyColumn(
            modifier = Modifier
                .fillMaxSize()
                .padding(top = innerPadding.calculateTopPadding(), start = 10.dp, end = 10.dp)
        ) {
            item {
                Demo_Text_Scale()
            }
            item {
                Demo_Text_Translation()
            }
            item {
                Demo_Text_Rotation()
            }
            item {
                Demo_Text_Color()
            }
        }
    }
}

@Composable
private fun Demo_Text_Scale() {

    val infiniteTransition = rememberInfiniteTransition(label = "infinite transition")
    val scale by infiniteTransition.animateFloat(
        initialValue = 1f,
        targetValue = 2f,
        animationSpec = infiniteRepeatable(tween(1000), RepeatMode.Reverse), label = ""
    )

    Column {
        Text(text = "1、缩放", modifier = Modifier.padding(vertical = 10.dp))
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(100.dp)
                .background(Color(0xFFF3F2F1)),
            contentAlignment = Alignment.Center
        ) {
            Text(text = "FU SHENG JUN", modifier = Modifier.graphicsLayer {
                scaleX = scale
                scaleY = scale
                transformOrigin = TransformOrigin.Center
            }, style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated))
        }
    }
}

@Composable
private fun Demo_Text_Translation() {

    val infiniteTransition = rememberInfiniteTransition(label = "infinite transition")
    val transition by infiniteTransition.animateFloat(
        initialValue = 0f,
        targetValue = 300f,
        animationSpec = infiniteRepeatable(tween(1000), RepeatMode.Reverse), label = ""
    )

    Column {
        Text(text = "2、平移", modifier = Modifier.padding(vertical = 10.dp))
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(100.dp)
                .background(Color(0xFFF3F2F1)),
            contentAlignment = Alignment.CenterStart
        ) {
            Text(text = "JAMES", modifier = Modifier.graphicsLayer {
                translationX = transition
            }, style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated))
        }
    }
}

@Composable
private fun Demo_Text_Rotation() {

    val infiniteTransition = rememberInfiniteTransition(label = "infinite transition")
    val rotation by infiniteTransition.animateFloat(
        initialValue = 0f,
        targetValue = 30f,
        animationSpec = infiniteRepeatable(tween(1000), RepeatMode.Reverse), label = ""
    )

    Column {
        Text(text = "3、旋转", modifier = Modifier.padding(vertical = 10.dp))
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(100.dp)
                .background(Color(0xFFF3F2F1)),
            contentAlignment = Alignment.Center
        ) {
            Text(text = "HAN KENG KENG", modifier = Modifier.graphicsLayer {
                rotationX = rotation
                rotationZ = rotation
            }, style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated))
        }
    }
}

@Composable
private fun Demo_Text_Color() {

    val infiniteTransition = rememberInfiniteTransition(label = "infinite transition")
    val animatedColor by infiniteTransition.animateColor(
        initialValue = Color(0xFF4CAF50),
        targetValue = Color(0xFFFF9800),
        animationSpec = infiniteRepeatable(tween(1000), RepeatMode.Reverse), label = ""
    )

    Column {
        Text(text = "4、颜色", modifier = Modifier.padding(vertical = 10.dp))
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(100.dp)
                .background(Color(0xFFF3F2F1)),
            contentAlignment = Alignment.Center
        ) {
            Text(
                text = "ZHONG ZI MING",
                color = animatedColor,
                fontSize = 20.sp,
                style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated)
            )
        }
    }
}